<template>
  <el-dialog
    draggable
    overflow
    :title="titleMap[mode]"
    v-model="visible"
    :width="1010"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px">
      <el-row justify="space-evenly">
        <el-col :span="23">
          <el-descriptions title="收货信息" :column="3" border label-align="right">
            <el-descriptions-item>
              <template #label>加工厂</template>
              {{ form.outfactory.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>产品</template>
              {{ form.material.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>计划数</template>
              {{ form.quantity }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>计划单价</template>
              {{ form.price }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>计划金额</template>
              {{ form.amount }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>已回收</template>
              {{ form.delivery_quantity ?? 0 }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>待回收</template>
              {{ form.quantity - (form.delivery_quantity ?? 0) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>备注</template>
              {{ form.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row justify="space-evenly">
        <el-col :span="23">
          <el-descriptions title="辅料明细" :column="1" direction="vertical">
            <el-descriptions-item>
              <template #label></template>
              <el-table :data="form.raws" border style="width: 100%">
                <el-table-column prop="material.spec" label="规格" width="100" />
                <el-table-column prop="material.name" label="品名" width="100" />
                <el-table-column prop="rate" label="比例" width="100" />
                <el-table-column
                  prop="storage.available_quantity"
                  label="剩余库存"
                  width="100"
                />
                <el-table-column
                  prop="storage.out_quantity"
                  label="已用库存"
                  width="100"
                />
              </el-table>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <sc-VxeTable
        ref="xGrid1"
        :gridEvts="gridEvents"
        :gridOps="gridSubOpts"
        :tablecode="'pro_outsourcing_product'"
        :url="$API.pro.outsourcing.product.list"
        :params="[{ code: form.code }]"
      >
      </sc-VxeTable>
    </el-form>
  </el-dialog>
  <SaveDialog
    v-if="dialog"
    ref="saveDialog"
    @closed="dialog = false"
    @success="handleSuccess"
  ></SaveDialog>
</template>
<script>
import tool from "@/utils/tool";
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import SaveDialog from "./save";
// import XEUtils from "xe-utils";
export default {
  emits: ["success", "closed"],
  components: { skAutoChoose, skDicSelect, SaveDialog },
  data() {
    return {
      mode: "add",
      dialog: false,
      form: {
        material: {},
        color: {},
        bom: {},
        outfactory: {},
        raws: [],
        attachments: [],
      },
      gridSubOpts: {
        height: 250,
      },
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      rules: {},
      visible: false,
      isSaveing: false,
      tableData: [],
      gridEvents: {
        // cellDblclick: ({ row }) => {
        //   // this.edit(row);
        // },
        add: () => {
          this.dialog = true;
          this.$nextTick(() => {
            this.$refs.saveDialog.setData(this.form);
            this.$refs.saveDialog.open();
          });
        },
        // edit: ({ button }) => {
        //   this.edit(button.selectRecords[0]);
        // },
      },
    };
  },
  mounted() {},
  methods: {
    // edit(data) {
    //   this.dialog = true;
    //   this.$nextTick(() => {
    //     this.$refs.saveDialog.setData(this.form, data);
    //     this.$refs.saveDialog.open("edit");
    //   });
    // },

    handleSuccess(data) {
      this.form.delivery_quantity += data.quantity;
      this.getBomList(this.form.code);
      this.getDetailsList(this.form.id);
      this.$refs.xGrid1.refresh();
    },
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    getBomList(code) {
      this.$API.pro.outsourcing.delivery.raws.get({ code: code }).then(res => {
        this.form.raws = res.data;
      });
    },
    getDetailsList(id) {
      this.$API.pro.outsourcing.delivery.pack.get({ detail_id: id }).then(res => {
        this.form.details = res.data;
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, tool.removeNull(data));
      this.getBomList(data.code);
      this.getDetailsList(data.id);
    },
  },
};
</script>

<style>
.attachments .el-upload--picture-card,
.attachments .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
</style>
